<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vue 07</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .active {
            background: chocolate;
        }

        .green {
            color: rgb(38, 167, 49);
            font-style: initial;
        }
    </style>
</head>

<body>
    <div id="app">{{obj}}
        <div v-bind:class="{active: isActive, green: isGreen}"
            style="width: 200px; height: 200px;text-align: center;line-height: 100px;">{{msg}}
        </div>
        <div :style="{color: color, fontSize: size}">
            Hi Vue
        </div>
    </div>
    <script text="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                msg: "I am coming!",
                obj: new Date(),
                isActive: true,
                isGreen: true,
                color: "rgb(167, 38, 98)",
                size: "50px",
            }
        });
        setTimeout(() => {
            app.isActive = false;
        }, 3000);
    </script>
</body>